<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>sortable</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.css" />
		<style type="text/css">
			ul {
				list-style: none;
				margin: 10px 5px;
				padding: 0;
				overflow: auto;
				min-height: 400px;
			}
			ul li {
				margin-bottom: 5px;
				position: relative;
			}
			ul li.transition {
				transition: all .5s;
				-webkit-transition: all .5s;
			}
			.img-container {
				float: left;
				margin-right: 5px;
			}
			.img-container img {
				width: 100%;
				height: 100%;
				display: block;
				box-shadow: 5px 5px 5px 0px lightgray;
				object-fit: cover;
			}
			.my-handle {
				cursor: move;
				cursor: -webkit-grabbing;
			}
			.ghost {
				opacity: 0;
				-webkit-animation-name: none;
			}
			i {
				font-style: normal;
			}
			
		.sortchosen {
			transform: scale(1.2);
			-webkit-transform: scale(1.2);
			-webkit-animation-name: none;
		}
		
		</style>
		<link rel="stylesheet" type="text/css" href="../css/preview.css" />
		<script type="text/javascript">
			function resetHeight() {
				var width = document.documentElement.clientWidth;
				var st = document.createElement('style') || document.getElementById("style_feed");
				st.id = 'style_feed';
				var height = (width - 10) * 0.5 * 0.75;
				st.innerHTML = "ul li{height:" + height + "px} .img-container{width:" + width * 0.5 + "px;height:" + height + "px}";
				document.head.appendChild(st);
			}
			window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
				if (window.orientation === 180 || window.orientation === 0) {
					console.log('竖屏状态！');
					resetHeight();
				}
				if (window.orientation === 90 || window.orientation === -90) {
					console.log('横屏状态！');
					resetHeight();
				}
			}, false);
			resetHeight();
		</script>
	</head>

	<body>
		<div class="mui-content">
			<ul id="ul_imgs">
				<li data-li="1">
					<div class="img-container drag-handle">
						<img class="item" src="../images/5.jpg" data-preview-src="" data-preview-group="1" />
					</div>
					<div class="img-content">
						<p>1</p>
					</div>
				</li>
				<li data-li="2">
					<div class="img-container drag-handle">
						<img class="item" src="../images/2.jpg" data-preview-src="" data-preview-group="1" />
					</div>
					<div class="img-content">
						<p>2</p>
					</div>					
				</li>
				<li data-li="3">
					<div class="img-container drag-handle">
						<img class="item" src="../images/3.jpg" data-preview-src="" data-preview-group="1" />
					</div>
					<div class="img-content">
						<p>3</p>
					</div>
					
				</li>
				<li data-li="4">
					<div class="img-container drag-handle">
						<img class="item" src="../images/4.jpg" data-preview-src="" data-preview-group="1" />
					</div>
					<div class="img-content">
						<p>4</p>
					</div>	
				</li>
				<li data-li="5">
					<div class="img-container drag-handle">
						<img class="item" src="../images/5.jpg" data-preview-src="" data-preview-group="1" />
					</div>
					<div class="img-content">
						<p>5</p>
					</div>
				
				</li>
				<li data-li="6">
					<div class="img-container drag-handle">
						<img class="item" src="../images/2.jpg" data-preview-src="" data-preview-group="1" />
					</div>
					<div class="img-content">
						<p>6</p>
					</div>
				
				</li>
				<li data-li="7">
					<div class="img-container drag-handle">
						<img class="item" src="../images/3.jpg" data-preview-src="" data-preview-group="1" />
					</div>
					<div class="img-content">
						<p>7</p>
					</div>	
				</li>
				<li data-li="8">
					<div class="img-container drag-handle">
						<img class="item" src="../images/4.jpg" data-preview-src="" data-preview-group="1" />
					</div>
					<div class="img-content">
						<p>8</p>
					</div>
				</li>
			</ul>

		</div>

	</body>
	<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/Sortable.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.zoom.js"></script>
	<script src="../js/mui.previewimage.js"></script>
	<script type="text/javascript">
		 //sortable:
		 //			1.git: https://github.com/RubaXa/Sortable
		 //			2.demo: http://rubaxa.github.io/Sortable/
		var sort;
		mui.init();
		var ispaixu = false;
		mui.ready(function() {
			mui.previewImage();
			setSortable();
		});
		function setSortable() {
			sort = new Sortable(document.getElementById("ul_imgs"), {
				chosenClass: '.sortchosen',
				ghostClass: '.ghost',
				scroll: true,
				handle: '.drag-handle',
				dropBubble:true,
				
			});
		};
	</script>

